<template lang="html">
<div>
  <header>
  	<div class="head">
  		<a href="">
  			<img src="../assets/my_header.png" id="img1"/>
  			<img src="../assets/yd_header_1.png" id="img2"/>
  		</a>
	  	<figure>
	  		<img src="../assets/yd_huiyno.png" id="img3"/>
	  		<figcaption>
	  			<h1><router-link to="login">点击登录</router-link></h1>
	  			<p>开通会员<img src="../assets/yd_youjiantou.png" /></p>
	  		</figcaption>
	  		<img src="../assets/yd_set.png" id="img4"/>
	  	</figure>
  	</div>
  	<div class="account">
  		<figure>
  			<img src="../assets/yd_yue.png"/>
  			<figcaption>
  				<h6>余额</h6>
  				<p>100元</p>
  			</figcaption>
  		</figure>
  		<figure>
  			<img src="../assets/yd_yue.png"/>
  			<figcaption>
  				<h6>优惠券</h6>
  				<p>10张</p>
  			</figcaption>
  		</figure>
  		<figure>
  			<img src="../assets/yd_yue.png"/>
  			<figcaption>
  				<h6>许鲜币</h6>
  				<p>0个</p>
  			</figcaption>
  		</figure>
  	</div>
  </header>
  <div class="list1">
  	<figure>
  		<img src="../assets/20161021103331267.png"/>
  		<figcaption>
  			<h6>待支付</h6>
  		</figcaption>
  	</figure>
  	<figure>
  		<img src="../assets/20161024103721450.png"/>
  		<figcaption>
  			<h6>待提货</h6>
  		</figcaption>
  	</figure>
  	<figure>
  		<img src="../assets/20161021103331267.png"/>
  		<figcaption>
  			<h6>已完成</h6>
  		</figcaption>
  	</figure>
  	<figure>
  		<img src="../assets/20161021103318707.png"/>
  		<figcaption>
  			<h6>售后退款</h6>
  		</figcaption>
  	</figure>
  	<figure>
  		<img src="../assets/20161021103307270.png"/>
  		<figcaption>
  			<h6>全部订单</h6>
  		</figcaption>
  	</figure>
  	
  </div>
  <div class="list2">
  	<figure>
  		<img src="../assets/20161021111128273.png"/>
  		<figcaption>
  			<h6>我的订单</h6>
  		</figcaption>
  	</figure>
  	<figure>
  		<img src="../assets/20161021040137102.png"/>
  		<figcaption>
  			<h6>我的订单</h6>
  		</figcaption>
  	</figure>
  	<figure>
  		<img src="../assets/20161021040143930.png"/>
  		<figcaption>
  			<h6>我的订单</h6>
  		</figcaption>
  	</figure>
  	<figure>
  		<img src="../assets/20161021110545351.png"/>
  		<figcaption>
  			<h6>我的订单</h6>
  		</figcaption>
  	</figure>
  	<figure>
  		<img src="../assets/20161021103301140.png"/>
  		<figcaption>
  			<h6>待付款</h6>
  		</figcaption>
  	</figure>
  	<figure>
  		<img src="../assets/20161021103248259.png"/>
  		<figcaption>
  			<h6>待付款</h6>
  		</figcaption>
  	</figure>
  	<figure>
  		<img src="../assets/20161021103257340.png"/>
  		<figcaption>
  			<h6>待付款</h6>
  		</figcaption>
  	</figure>
  	<figure>
  		<img src="../assets/20161021103304463.png"/>
  		<figcaption>
  			<h6>待付款</h6>
  		</figcaption>
  	</figure>
  </div>
  <div class="list3">
  	<img src="../assets/banner.png"/>
  </div>
</div>
</template>
<script>
  export default{
  }
</script>
<style lang="css">
	header{
		width:100%;
		height: 10.5rem;
		background: url(../assets/yd_bg.png);
		background-size: 16rem 10.5rem;
		position: relative;
	}
	header .head{
		padding-top:2rem;
	}
	header .head #img1{
		margin-left: 1rem;
		width:4rem;
		height:4rem;
		background: rgba(255,255,255,0.8);
	}
	header .head #img2{
		width:3.7rem;
		height:3.7rem;
		position: absolute;
		top:2.3rem;
		left:1.2rem;
	}
	header .head #img3{
		width:1.65rem;
		height:0.75rem;
		position: absolute;
		top:2.7rem;
		left:9rem;
	}
	header .head #img4{
		width:1.05rem;
		height: 1.05rem;
		position: absolute;
		top:0.6rem;
		right:0.8rem;
	}
	header .head figcaption{
		width:9rem;
		height:5rem;
		position: absolute;
		top:2.5rem;
		right:1.7rem;
	}
	header h1 a{
		width:3.2rem;
		height:1.05rem;
		font-size:0.8rem;
		color:white;
		position: absolute;
		top:0;
		right:5.8rem;
	}
	header .head figcaption p{
		margin-top: 1.5rem;
		width:4.3rem;
		height:1.15rem;
		line-height: 1.15rem;
		color:white;
		font-size:0.7rem;
		text-indent: 0.3rem;
		border-radius: 0.5rem;
		background: #eabd32;
	}
	header .head figcaption img{
		width:0.5rem;
		height:0.75rem;
		position: absolute;
		top:1.7rem;
		left:3.4rem;
	}
	header .account{
		display: flex;
		justify-content: space-around;
	}
	header .account img{
		width:1.95rem;
		height:1.95rem;
	}
	header .account figcaption{
		height:3.45rem;
	}
	header .account figcaption h6{
		margin-top: -0.3rem;
		height:0.75rem;
		font-size: 0.5rem;
		color:#424644;
		text-align: center;
	}
	header .account figcaption p{
		height:0.75rem;
		font-size: 0.5rem;
		color:#424644;
		font-weight: bold;
	}
	.list1{
		padding-top: 0.5rem;
		width:100%;
		height:2.5rem;
		display: flex;
		justify-content:center;
		border-bottom: 0.05rem solid lightgray;
	}
	.list1 figure{
		width:2.7rem;
		margin:0 0.1rem;
	}
	.list1 figure img{
		width:1rem;
		height:1rem;
		margin-left: 1rem;
	}
	.list1 figure h6{
		font-size: 0.1rem;
		width:3rem;
		text-align: center;
		height:0.8rem;
		line-height: 0.8rem;
		color:#424643;
	}
	.list2{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		
		padding: 0.5rem 0;
		border-bottom: 0.05rem solid gainsboro;
	}
	.list2 figure{
		width:3.15rem;
		height: 2.5rem;
		margin: 0.25rem;
	}
	.list2 figure img{
		width: 1.6rem;
		margin-left: 0.7rem;
	}
	.list2 figure h6{
		color:#424644;
		font-size: 0.6rem;
		text-align: center;
	}
	.list3{
		background: #f5f6f8;
	}
	.list3 img{
		width:16rem;
		height:5.35rem;
	}
</style>
